<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电子表</title>
    <style>
        #day{font-size:2em;}
        #time{font-size:5em;
            font-family: 'Microsoft YaHei';
        }
        .f{font-size: 7em;}
        #hdiv,#mdiv,#sdiv{
            font-size:8em;
            font-family: 'Quartz Regular';
            color:#fff;
            background-color:#000;
        }
        #iWatch{
            width:300px;
            text-align:center;
            line-height:60px;
            font-size:40px;
            font-weight:bold;
            border:2px solid #333;
            background:#abcdef;
        }
    </style>

</head>
    <h3>简易电子表.现在时间是</h3>
    <div id="day"></div>
    <div id="time"></div>
    <p>使用Date() , setTimeout() , 
    toLocaleDateString() , 
    toLocaleTimeString()</p>
    <hr>
    <div>
        <span id="hdiv">1</span><span class="f">:</span>
        <span id="mdiv">1</span><span class="f">:</span>
        <span id="sdiv">1</span><span class="f"></span>
    </div>

    <p>使用Date() , 
    setTimeout() , 
    getHours() , 
    getMinutes() , 
    getSeconds() </p>

    <div id="iWatch"></div>
    <p>使用: 同上例</p>
<body>

<script>
    //表1
    timer();
    function timer () {
        var d = document.getElementById('day');
        var t = document.getElementById('time');
        var n = new Date();
        setTimeout(timer,1000);
        d.innerHTML = n.toLocaleDateString();
        t.innerHTML = n.toLocaleTimeString();
    }

    //表2
    now();
    function now () {
        var hdiv = document.getElementById('hdiv');
        var mdiv = document.getElementById('mdiv');
        var sdiv = document.getElementById('sdiv');

        var date = new Date();
        var h = date.getHours();if(h<9){h='0'+h};
        var m = date.getMinutes();if(m<=9){m='0'+m};
        var s = date.getSeconds();if(s<=9){s='0'+s};

        setTimeout(now,1000);
        hdiv.innerHTML = h;
        mdiv.innerHTML = m;
        sdiv.innerHTML = s;
    }

    //表3
    setInterval(run, 1000);
    run();
    function run(){
        //实例化 Date
        var date = new Date();
        //获取时分秒
        var h = date.getHours();
        var i = date.getMinutes();
        var s = date.getSeconds();
        //处理
        h = (h<10)?'0'+h:h;
        i = (i<10)?'0'+i:i;
        s = (s<10)?'0'+s:s;
        //写入表
        document.getElementById('iWatch').innerHTML = h+':'+i+':'+s;
    }
    

</script>

</body>
</html>
